<template>
<div class="result-body common-page">
  <div class="result-body__left">
    <source-list :keyword="keyword" @on-select="resultRefresh"></source-list>
  </div>
  <div class="result-body__right">
    <xdh-list-panel ref="listPanel" class="list-wrap" :load="loadData" :is-auto="false" :state="state" fit title="信息列表">
      <el-table :data="state.list" border stripe size="mini" height="100%">
        <el-table-column prop="index" width="60" class="index-column">
          <template slot-scope="scope">
            <div class="index-label" >
              <em>{{scope.$index + 1}}</em>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="搜索结果" prop="data">
          <template slot-scope="scope">
            <div class="info-wrap" v-if="indexItem && indexItem.columns && indexItem.columns.list.length">
              <p class="info-wrap__default">
                <span class="col"><em>采集时间</em><strong v-highlight="highlightOpt">{{indexItem.createtime}}</strong></span>
                <span class="col"><em>采集</em><strong v-highlight="highlightOpt">自动采集</strong></span>
              </p>
              <p class="info-wrap__info" >
                <span class="col" v-for="(item, index) in indexItem.columns.list" :key="index">
                  <em>{{item.columnComment}}</em>
                  <strong v-if="!scope.row[item.attrname]"></strong>
                  <strong v-if="scope.row[item.attrname]" v-highlight="highlightOpt">{{scope.row[item.attrname]}}</strong>
                </span>
                <!--  
                <span class="col"><em>关键字</em><strong v-highlight="highlightOpt">{{scope.row.data.keyword}}测试</strong></span> -->
              </p>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </xdh-list-panel>
    
      
  </div>
</div>
</template>
<style scoped lang="scss">
@import "../style/_vars.scss";
.result-body{
  box-sizing: border-box;
  display: flex;
  flex-flow: row nowrap;
  // border: 1px solid red;
  &__left{
    box-sizing: border-box;
    flex: 0 0 250px;
    width: 250px;
    height: 100%;
    padding: 10px;
    border-right: 1px solid $--border-color-base;
  }
  &__right{
    flex: 1;
    box-sizing: border-box;
    display: flex;
    flex-flow: column;
    height: 100%;
    padding: 10px;
    .list-wrap{
      flex: 1;
      height: 100%;
      border-color: $--border-color-lighter;
      /deep/ .el-header.xdh-layout__north>.xdh-title--primary>.xdh-title__wrapper{
        background: $--border-color-lighter;
      }
      /deep/ .xdh-list-panel__loading{
        height: auto;
      }
      /deep/ .el-table{
        th {
          background: $--color-primary-light-9;
          div.cell{
            text-align:center;
          }
        }
        td.el-table_1_column_1{
          vertical-align: top
        }
      } 
      .index-label{
        width: 100%;
        height: 100%;
        text-align:center;
        // border: 1px solid red;
        em{
          display: inline-block;
          padding: 0 8px;
          line-height: 2;
          color: white;
          background: $--color-primary;
        }
      }
      .info-wrap{
        font-size: 14px;
        &__default{
          color: $--color-primary;
        }
        p{
          margin: 0;
          padding: 0;
        }
        em, i, strong, b{
          font-weight: normal;
          font-style: normal;
        }
        .col{
          margin-right: 10px;
          em{
            margin-right: 3px;
            &:after{
              content: ':';
            }
          }
        }
        /deep/ .xdh-highlight__keyword.keyword-hl{
          color: red !important;
          background: none !important;
          padding: 0 !important;
        }
      }
      /deep/ .xdh-pager.xdh-list-panel__pager{
        background: transparent;
      }
    }
  }
}
</style>

<script>
import SourceList from './source-list'
import XdhListPanel from '@/widgets/xdh-list-panel'
import {GET_INFO_LIST} from '@/base/types'
import highlight from '@/utils/directives/highlight'
export default {
  name: 'ResultBody',
  components: {
    SourceList,
    XdhListPanel
  },
  directives: {
    highlight
  },
  props: {
    keyword: {
      type: String,
      required: true
    }
  },
  data() {
    let keywrods = this.keyword.split(/\s+/)
    return {
      indexItem: {
        columns: {
          list: []
        }
      },
      indexName: '',
      indexCols: [],
      state: {
        total: 0,
        list: []
      },
      highlightOpt: {
        keyword: keywrods,
        class: 'keyword-hl'
      }
    }
  },
  methods: {
    loadData(page, size) {
      return this.$store.dispatch(GET_INFO_LIST, {
        url: this.indexItem.url,
        page: page,
        size: size,
        q: this.keyword,
        data: {}
      }).then((res) => {
        // console.log('search fetch', res)
        this.state.total = res.total
        this.state.list = res.content
      })
    },
    
    resultRefresh(item) {
      this.indexItem = item
      // console.log('indexItem', this.indexItem)
      this.$refs.listPanel.reload()
    } 
  },
  mounted() {
    // console.log('result body')
  }
}
</script>


